import React,{PureComponent} from 'react'
import {View, Text,StyleSheet,PixelRatio,TouchableOpacity,Image} from 'react-native'
import { default as ListView } from '../components/CustomList/index'
import Icon2 from 'react-native-vector-icons/AntDesign'

const pixHeight = 1 / PixelRatio.get();

export default class ShopList extends PureComponent{
    constructor(props) {
        super(props)
        this.state = {
            list:[1,2,3,4,5]
        }
    }

    _jumpToShopAdd = () => {
        console.log(66666)
        this.props.navigation.navigate("ShopAdd")
    }

    _onFetch = async (page = 1, startFetch, abortFetch) => {
        try {
            let pageLimit = 10;
            // await this.sleep(10);

            // console.log(111,this.state.currentTab)
            // if(this.state.respData.length == 0) {
            // console.log(112,this.state.respData.length)
            // await this.loadData();
            // }
            console.log(222)
            let productList = this.state.list;
            console.log(333,productList)
            // productList.map((m) => {
            //     m.checked = false;
            // })
            // if(this.state.firstInit) {
            //     this.setState({currentTab:1,firstInit:false})
            // }
            console.log('[productList]',productList)
            startFetch(productList, pageLimit);
        } catch (err) {
            abortFetch(); //manually stop the refresh or pagination if it encounters network error
        }
    }

    _Separator = () => {
        return <View style={{height:pixHeight,backgroundColor:'#ddd',}}/>
    }
    _renderItem = () => {
        return (
            <TouchableOpacity
                style={styles.listItem}
                onPress={() => {}}>
                <View style={styles.itemLeft}>
                    <Image
                        style={{width:30,height:30,borderRadius:30,marginRight:5,}}
                        source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
                    />
                    <Text style={[{color:commonStyle.textGoldColor},commonStyle.titleFont]}>安泰水晶城店</Text>
                </View>
                <View style={styles.itemRight}>
                    <Text style={{color:commonStyle.textGrayColor}}>点击查看</Text>
                    <Icon2 name='right' size={16} color="#dddddd" /> 
                </View>
            </TouchableOpacity>
        )
    }

    render() {
        return (
            <View style={styles.shopList}>
                <ListView keyExtractor={(item, index) => `${index}`} separator={this._Separator}
                          renderItem={this._renderItem} onFetch={this._onFetch}/>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    shopList:{
        flex:1,
        backgroundColor:'#f6f6f6',
       
    },
    listItem:{
        padding:15,
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'space-between',
        backgroundColor:'#fff'
    },
    itemLeft:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'flex-start',
    },
    itemRight:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'flex-end',
    },
})